<template>
	<view class="columnbox wdh-100 content">
		<view class="info-box wdh-100 columnbox">
			<view class="rowbox wdh-100 spb">
				<view style="font-size: 32rpx;font-weight: bold;">发布充值购</view>
				<view class="rowbox small-btn" @click="chooseTem">选择推荐方案</view>
			</view>
			<view class="columnbox wdh-100 desc-box">
				<view class="wdh-100 desc-title">已为您自定生成一个方案</view>
				<view class="rowbox wdh-100 one-info spb info-line">
					<view>充值金额</view>
					<input type="digit" v-model="price" placeholder-class="noinfo" placeholder="点击输入" />
				</view>
				<view class="rowbox wdh-100 one-info spb info-line">
					<view>活动商品</view>
					<input style="width: 300rpx;" @blur="getWenAn" v-model="goodname" placeholder-class="noinfo"
						placeholder="点击输入" />
					<view class="rowbox small-btn" @click="getGoods">热门商品</view>
				</view>
				<view class="rowbox wdh-100 one-info spb info-line">
					<view>商品价格</view>
					<input @blur="getBiaoTi" type="digit" v-model="yuanjia" placeholder-class="noinfo"
						placeholder="点击输入" />
				</view>
				<view class="rowbox wdh-100 one-info spb info-line">
					<view>活动价格</view>
					<input type="digit" v-model="goodprice" placeholder-class="noinfo" placeholder="点击输入" />
				</view>
				<view class="rowbox wdh-100 one-info spb info-line">
					<view>活动天数</view>
					<input type="number" v-model="day" placeholder-class="noinfo" placeholder="点击输入" />
				</view>
				<view class="rowbox wdh-100 one-info spb info-line">
					<view>活动标题</view>
					<input v-model="name" placeholder-class="noinfo" placeholder="点击输入" />
				</view>
			</view>
		</view>
		<view class="info-box wdh-100 columnbox">
			<view class="rowbox wdh-100 spb">
				<view style="font-size: 32rpx;font-weight: bold;">产品详情</view>
				<view @click="getWenAn" class="rowbox small-btn">换个文案</view>
			</view>
			<view class="info-box wdh-100 columnbox">
				<textarea v-model="copywriting" placeholder="请输入产品详情" class="content-box"></textarea>
				<view class="rowbox img-box" v-for="(item,index) in images" :key='index'>
					<image :src="item" mode="aspectFill">
					</image>
					<view class="rowbox delet-box" @click="deletImg(index)">
						<u-icon size="70rpx" name="close-circle-fill"></u-icon>
					</view>
				</view>
				<view class="rowbox img-box" v-for="(item,index) in uploadImg" :key='index'>
					<image :src="item" mode="aspectFill">
					</image>
					<view class="rowbox delet-box" @click="deletUploadImgImg(index)">
						<u-icon size="70rpx" name="close-circle-fill"></u-icon>
					</view>
				</view>

				<view class="rowbox add-btn" @click="addImg">+添加新图片</view>
				<!-- 	<view class="img-list wdh-100">
            			<u-upload max-count="1" ref="upload" @afterRead="afterRead" @delete="deletePic" name="1"
            			:deletable="true" :previewImage="true" :file-list="fileList1"></u-upload>
            	</view> -->
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="bottom-box wdh-100 rowbox">
			<view class="one-btn rowbox def-bgcol" @click="submitInfo">保存</view>
		</view>

		<IosKefu :show="showIosKefu" :type="matype" @close="closeIosKefu"></IosKefu>
		<AndrTaocan :show="showAndrTaocan" :taocanid="4" @close="closeAndrTaocan" @refsh="handlerefsh"></AndrTaocan>
		<u-popup mode="center" @close="temflag=false,curtem=0" :show="temflag" round="20rpx">
			<view class="columnbox tem-box">
				<view class="rowbox tem-title">充值购推荐方案</view>
				<scroll-view scroll-y class="wdh-100" style="height: 40vh;">
					<view @click="curtem=index" class="rowbox spb one-type" v-for="(item,index) in temList"
						:key='index'>
						<view class="columnbox als">
							<view> {{item.name}}</view>
							<view v-if="temType==1" style="font-size: 22rpx;margin-top: 10rpx;color: #999d9f;">
								{{item.title}}
							</view>
						</view>
						<image v-if="curtem==index" class="tem-icon" src="/static/img/sel.png" mode="widthFix"></image>
						<image v-else class="tem-icon" src="/static/img/unsel.png" mode="widthFix"></image>
					</view>
				</scroll-view>
				<view class="rowbox wdh-100 tem-btn">
					<view class="rowbox" @click="temflag=false,curtem=0">取消</view>
					<view class="rowbox" @click="userTem">使用此方案</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import IosKefu from '@/components/ioskefu.vue'
	import AndrTaocan from '@/components/andrtaocan.vue'
	export default {
		components: {
			IosKefu,
			AndrTaocan
		},
		data() {
			return {
				showAndrTaocan: false,
				matype: '',
				showIosKefu: false,
				id: '',
				title: '',
				fileList1: [],
				price: '',
				goodprice: '',
				name: '',
				copywriting: '',
				images: [],
				uploadImg: [],
				goodname: '',
				submitflag: false,
				temList: [],
				temflag: false,
				curtem: 0,
				day: '',
				yuanjia: "",
				temType: 1, //1充值方案 2水果
			};
		},
		onLoad(options) {
			if (options.id) {
				this.id = Number(options.id)
				this.getDetail()
			}
		},
		methods: {
			getGoods() {
				this.temType = 2
				this.$req.post('/shanghu/shuiguotj').then(res => {
					this.temList = res.data.data
					this.temflag = true
				})
			},
			userTem() {
				this.temflag = false
				if (this.temType == 1) {
					// this.name = this.temList[this.curtem].name
					this.price = this.temList[this.curtem].price
					this.day = this.temList[this.curtem].day
					this.title = this.temList[this.curtem].title
					this.goodprice = this.temList[this.curtem].goodprice
				} else {
					this.goodname = this.temList[this.curtem].name
					this.yuanjia = this.temList[this.curtem].original
					if (this.goodname != '') {
						this.getWenAn()
					}
				}
				this.getBiaoTi()
			},
			getBiaoTi() {
				this.$req.post('/shanghu/biaoti', {
					goodname: this.goodname,
					goodprice: Number(this.goodprice),
					price: Number(this.price)
				}).then(res => {
					this.name = res.data.data
				})
			},
			//选择方案
			chooseTem() {
				this.temType = 1
				this.$req.post('/shanghu/fangans').then(res => {
					this.temList = res.data.data
					this.temflag = true
				})
			},
			closeIosKefu() {
				this.showIosKefu = false
			},

			closeAndrTaocan() {
				console.log('这是套餐关闭按钮 ')
				this.showAndrTaocan = false
			},
			deletUploadImgImg(index) {
				this.uploadImg.splice(index, 1)
			},
			deletImg(index) {
				this.images.splice(index, 1)
			},
			addImg() {
				uni.chooseImage({
					success: (res) => {
						this.uploadImg = this.uploadImg.concat(res.tempFilePaths)
					}
				})
			},
			getWenAn() {
				if (this.goodname == '') {
					uni.showToast({
						title: '请输入活动标题',
						icon: 'none'
					})
				} else {
					this.$req.post('/shanghu/copywritingscreen', {
						name: this.goodname
					}).then(res => {
						this.uploadImg = []
						// this.name = res.data.data.title
						this.copywriting = res.data.data.data.content
						this.images = res.data.data.data.images.split(',')
					})
				}
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://dscc.suishilian.com/admin/uploadFile', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data = JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
							resolve(data.data)
						}
					});
				})
			},
			getDetail() {
				this.$req.post('/shanghu/chongzhigou', {
					"id": this.id,
				}).then(res => {
					let info = res.data.data
					this.title = res.data.title
					this.goodname = info.goodname
					this.name = info.name
					this.price = info.price || ''
					this.goodprice = info.goodprice || ''
					this.copywriting = info.content
					this.images = info.image.split(',')
					if (info.image) {
						this.fileList1 = [{
							url: info.image
						}]
					}

				})
			},
			submitInfo() {
				if (!this.price) {
					uni.showToast({
						title: '请输入充值金额',
						icon: 'none'
					})
					return
				}
				if (!this.goodname) {
					uni.showToast({
						title: '请输入活动商品',
						icon: 'none'
					})
					return
				}
				if (!this.goodprice) {
					uni.showToast({
						title: '请输入活动价格',
						icon: 'none'
					})
					return
				}
				if (!this.name) {
					uni.showToast({
						title: '请输入活动标题',
						icon: 'none'
					})
					return
				}
				if (!this.copywriting) {
					uni.showToast({
						title: '请输入产品详情',
						icon: 'none'
					})
					return
				}

				if (this.images.length == 0 && this.uploadImg.length == 0) {
					uni.showToast({
						title: '请上传图片',
						icon: 'none'
					})
					return
				}
				if (!this.submitflag) {
					let userInfo = uni.getStorageSync('userInfo')
					if (userInfo.shanghuid == 0) {
						this.submitflag = false
						uni.navigateTo({
							url: '/pages/iden/iden'
						})
					} else {
						this.$req.post('/shanghu/shanghuuserInfo', {
							uid: uni.getStorageSync('uid')
						}).then((res) => {
							let data = res.data.data
							if (data.czg === 1 && data.czginttime === 0) {
								if (wx.getSystemInfoSync().system.indexOf('Android') > -1) {
									this.showAndrTaocan = true
								} else {
									this.matype = 'czgimg'
									this.showIosKefu = true
								}

							} else if (data.czg === 1 && data.czginttime > 0) {
								if (wx.getSystemInfoSync().system.indexOf('Android') > -1) {
									this.showAndrTaocan = true
								} else {
									this.matype = 'czgimg'
									this.showIosKefu = true
								}
							} else {
								// if (data.czgnum < 10) {
								// 	let flag = true
								// 	if (uni.getStorageSync('czgtaoendtime')) {
								// 		var ctime = new Date().getTime()
								// 		if (ctime > uni.getStorageSync('czgtaoendtime')) {
								// 			uni.removeStorageSync('czgtaoendtime')
								// 		} else {
								// 			flag = false
								// 		}
								// 	}
								// 	if (wx.getSystemInfoSync().system.indexOf('Android') > -1) {
								// 		this.showAndrTaocan = flag
								// 	} else {
								// 		this.matype = 'czgimg'
								// 		this.showIosKefu = flag
								// 	}
								// 	if (!uni.getStorageSync('czgtaoendtime')) {
								// 		let endTime = new Date(new Date(new Date().toLocaleDateString())
								// 			.getTime() +
								// 			24 * 60 *
								// 			60 *
								// 			1000 - 1); // 当天23:59
								// 		uni.setStorageSync('czgtaoendtime', endTime)
								// 	}
								// }
								this.sendInfo()
							}
						})
					}
				}
			},
			async sendInfo() {
				this.submitflag = true
				uni.showLoading({
					title: '提交中'
				})
				let list = []
				for (var i = 0; i < this.uploadImg.length; i++) {
					let img = await this.sendImg(this.uploadImg[i])
					list.push(img)
				}
				let req = {
					name: this.name,
					goodname: this.goodname,
					price: Number(this.price),
					goodprice: Number(this.goodprice),
					image: this.images.join(',') + ',' + list,
					content: this.copywriting,
					shanghuid: uni.getStorageSync('userInfo').shanghuid,
				}
				let url = ''
				if (this.id) {
					req.id = this.id
					url = '/shanghu/czgupdate'
				} else {
					url = '/shanghu/czgadd'
				}
				this.$req.post(url, req).then((res) => {
					uni.hideLoading()
					let data = res.data
					this.submitflag = false
					if (data.code === 0) {
						uni.showToast({
							mask: true,
							title: '保存成功',
							duration: 500,
						})
						uni.navigateBack()

					} else {
						uni.showToast({
							mask: true,
							icon: 'none',
							title: data.msg
						})
					}
				})
			},
			sendImg(url) {
				return new Promise(resolve => {
					this.$req.uploadImg(url).then(res => {
						console.log('==', res)
						resolve(res.data.data)
					})
				})
			},
			handlerefsh() {
				this.getDetail()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.beizhu {
		width: 100%;
		font-size: 30rpx;
		text-align: left;
		padding: 30rpx 32rpx 10rpx 32rpx;
		color: #999;
	}

	.img-list {
		padding-top: 32rpx;
		display: flex;

		justify-content: flex-start;

		.tit {
			font-size: 28rpx;
			margin-right: 30rpx;
		}
	}

	.content {
		min-height: 100vh;
		background: #f6f6f6;
		justify-content: flex-start;
		font-family: PingFang SC;
	}

	.info-box {
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
		width: 710rpx;
		border-radius: 10rpx;
		background: #fff;
	}

	.one-info {
		padding: 20rpx 0;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 70rpx;

		input {
			text-align: right;
			width: calc(100% - 200rpx);
			font-size: 28rpx;
		}
	}

	.require-title {
		font-size: 28rpx;
		width: 100%;
		padding: 32rpx 20rpx;
		box-sizing: border-box;
		font-weight: bold;
	}

	.info-line {
		border-bottom: #f1eff3 solid 1px;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		background: #fff;
		padding: 20rpx 20rpx;
		padding-bottom: 40rpx;
		box-shadow: 0 0 4px 2px #eeecef;
	}

	.one-btn {
		width: 100%;
		font-size: 28rpx;
		height: 90rpx;
		border-radius: 20rpx;
		color: #fff;
	}

	.submit-btn {
		background: #eeecef;
		color: #606266;
	}

	.wenan-btn {
		margin-left: 20rpx;
		border-radius: 10rpx;
		padding: 10rpx 10rpx;
		color: #fff;
		font-size: 24rpx;
		background: #00c664;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.add-btn {
		width: 100%;
		border: #eeecef solid 1px;
		margin: 20rpx 0;
		border-radius: 10rpx;
		font-size: 28rpx;
		height: 90rpx;
	}

	.content-box {
		background: rgba(#f1eff0, 0.4);
		font-size: 28rpx;
		margin-top: 20rpx;
		border-end-start-radius: 10rpx;
		padding: 20rpx 20rpx;
		width: calc(100% - 40rpx);
	}

	.img-box {
		width: 100%;
		position: relative;
		height: 500rpx;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 500rpx;
		}

		.delet-box {
			position: absolute;
			top: 0;
			right: 0;
			width: 70rpx;
			height: 70rpx;
			background: rgba(#fff, 0.4);
			border-radius: 100rpx;
		}
	}

	.small-btn {
		font-size: 24rpx;
		color: #00c664;
		border: #00c664 solid 1px;
		line-height: 40rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
	}

	.desc-title {
		font-size: 24rpx;
		color: #606266;
		border-bottom: #e1e1e1 solid 1px;
		padding-bottom: 20rpx
	}

	.desc-box {
		padding: 20rpx 20rpx;
		background: rgba(#f1eff0, 0.4);
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.tem-box {
		width: 700rpx;
	}

	.tem-title {
		padding: 20rpx 0;
		font-size: 28rpx;
		font-weight: bold;
	}

	.one-type {
		width: 90%;
		margin-left: 5%;
		padding: 20rpx 32rpx;
		border: #eeecef solid 1px;
		border-radius: 10rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.tem-icon {
		width: 28rpx;
		height: 28rpx;
	}

	.tem-btn {
		border-top: #f1eff0 solid 1px;
		padding: 20rpx 0;
		font-size: 28rpx;

		view {
			width: 40%;
			border-radius: 10rpx;
			margin: 0 20rpx;
		}
	}

	.tem-btn>view:nth-child(1) {
		height: 70rpx;
		color: #606266;
		border: #e1e1e1 solid 1px;
	}

	.tem-btn>view:nth-child(2) {
		height: 70rpx;
		color: #fff;
		background: #00c664;
	}
</style>
<style>
	.noinfo {
		color: #a7a8aa;
	}
</style>